<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="./../template/main.xhtml">
            <ui:define name="content">
                <h1 class="title ui-widget-header ui-corner-all ">Quản Lý Tin Tức</h1>
                <p:growl id="messages"/>
                  <h:form>
                    <p:commandButton id="btnCreate" action="#{newsController.resetSelectNews()}" update=":formCreate" oncomplete="PF('dialogCreate').show()" icon="icon-create" title="Thêm" value="Thêm"/>
                </h:form>
                <p:outputPanel deferred="true">
                
                <h:form id="formDataTable">
                    <p:dataTable style="text-align: center" id="newsform" var="news" value="#{newsController.listnews}" paginator="true" rows="3" 
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15" 
                                 emptyMessage="Không tìm thấy loại sản phẩm nào...">

<!--                        <p:column headerText="ID" style="width:5%; text-align: center" sortBy="#{news.content}" filterBy="#{news.content}">
                            <p:editor value="#{news.content}" />
                        </p:column>-->
                        <p:column headerText="ID" style="width:2%; text-align: center" sortBy="#{news.id}" filterBy="#{news.id}">
                            <h:outputText value="#{news.id}" />
                        </p:column>
                        <p:column headerText="Tiêu đề" style="width:5%; text-align: center" sortBy="#{news.title}" filterBy="#{news.title}">
                             <h:outputText value="#{news.title}" />
                        </p:column>
                        <p:column headerText="Thể loại" style="width:3%; text-align: center" sortBy="#{news.category.name}" filterBy="#{news.category.name}">
                            <h:outputText value="#{news.category.name}" />
                        </p:column>
                        <p:column headerText="Ngày Gửi" style="width:3%; text-align: center" sortBy="#{news.datePost}" filterBy="#{news.datePost}">
                            <h:outputText value="#{news.datePost}" />
                        </p:column>
                        <p:column headerText="Mô tả" style="width:40%; text-align: center" sortBy="#{news.description}" filterBy="#{news.description}">
                            <p:editor value="#{news.description}"  />
                        </p:column>
<!--                       <p:column headerText="ID" style="width:5%; text-align: center" sortBy="#{news.content}" filterBy="#{news.content}">
                            <p:editor value="#{news.content}" />-->                      
                            <p:column>
                            <p:commandButton id="btnViewDetails" update=":viewDetailsForm" oncomplete="PF('viewDetailsDialog').show()" icon="ui-icon ui-icon-arrow-4-diag" title="Chi tiết">
                                <f:setPropertyActionListener value="#{news}" target="#{newsController.selectnews}"/>  
                            </p:commandButton>
<!--                            <p:commandButton id="btnUpdateDeliveryNote" update=":updateDeliveryNoteForm" oncomplete="PF('updateDeliveryNoteDialog').show()" icon="ui-icon ui-icon-wrench" title="Sửa">
                                <f:setPropertyActionListener value="#{deliveryNote}" target="#{deliveryNoteController.selectedDeliveryNote}"/>  
                            </p:commandButton>
-->
                            <p:commandButton id="btnDelete" update=":deleteForm" oncomplete="PF('confirmation').show()" icon="ui-icon ui-icon-closethick" title="Xóa">
                                <f:setPropertyActionListener value="#{news}" target="#{newsController.selectnews}"/>  
                            </p:commandButton>
                        </p:column>
                    </p:dataTable>  
                </h:form>
                <!--Create-->
                <h:form id="formCreate">
                    <p:dialog header="Thêm" widgetVar="dialogCreate" resizable="false" 
                              showEffect="fade" hideEffect="fade" modal="true" > 
                        <p:tabView id="tabView">
                            <!-- Tab 1 -->
                            <p:tab id="tab1" title="Thông tin">
                                <h:panelGrid columns="2" cellpadding="10" width="800px">
                    <p:outputLabel for="date" value="Ngày:"/>
                                 <p:calendar id="date" value="#{newsController.selectnews.datePost}" disabled="true" 
                                    navigator="true" yearRange="c-100:c-0" maxdate="31/12/2020" 
                                    pattern="dd/MM/yyyy" showOn="button" readonlyInput="true"/>

                              <h:outputText value="Tiêu đề:"/>
                              <p:inputText value="#{newsController.selectnews.title}" required="true" />
                              <h:outputLabel value="Thể loại:"/>
                        
                            
                              <p:selectOneMenu value="#{newsController.selectnews.category.id}" required="true">
                                <f:selectItem itemValue="#{null}" itemLabel="Chọn thể loại"/>
                                <f:selectItems value="#{newsController.listCategory}" var="category" 
                                               itemValue="#{category.id}" itemLabel="#{category.name}"/>                                
                            </p:selectOneMenu>   
                              <h:outputText value="URL:"/>
                              <p:inputText value="#{newsController.selectnews.url}"  required="true"/>
                                  <h:outputLabel value="Source"/>
                                  <p:inputText value="#{newsController.selectnews.source}"  required="true"/>
                              <!--Ảnh-->
                                <h:outputLabel value="Ảnh:" />
                            <p:fileUpload fileUploadListener="#{newsController.handleFileUpload}" mode="advanced" dragDropSupport="false" 
                                          multiple="false" sizeLimit="5000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>

                            <f:facet name="footer">
                                <p:separator/>                                  
                                <p:commandButton  actionListener="#{newsController.btnCreate()}" update=":formDataTable, :messages" oncomplete="dialogCreate.hide()" icon="ui-icon-contact" title="Thêm" value="Thêm"/>
                                <p:commandButton  oncomplete="dialogCreate.hide();" icon="icon-create" title="Hủy" value="Hủy"/>
                            </f:facet>
                            
                         
                        </h:panelGrid>
                            </p:tab>
                               <p:tab id="tab2" title="Nội dung, Mô tả">
                                   <h:panelGrid columns="2" cellpadding="10" width="800px">
                                     
                                    <h:outputLabel value="Nội dung"/>
                                    <p:editor value="#{newsController.selectnews.content}" width="700" height="300"/>
                                     <h:outputLabel value="Mô tả"/>
                                     <p:editor value="#{newsController.selectnews.description}" width="700" height="200"/>
                                     <f:facet name="footer">
                                     <p:separator/>                                  
                                    <p:commandButton  actionListener="#{newsController.btnCreate()}" update=":formDataTable, :messages" oncomplete="dialogCreate.hide()" icon="ui-icon-contact" title="Thêm" value="Thêm"/>
                                    <p:commandButton  oncomplete="dialogCreate.hide();" icon="icon-create" title="Hủy" value="Hủy"/>
                                    </f:facet>
                                   </h:panelGrid>
                               </p:tab>
                       </p:tabView>
                    </p:dialog>  
                </h:form>
                <!---Content Detail-->
                <h:form id="viewDetailsForm">
                    <p:dialog header="Chi tiết" widgetVar="viewDetailsDialog" resizable="false"
                              showEffect="fade" hideEffect="fade" modal="true">                             
                           <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:10px;" styleClass="my-panel-grid">
                            <p:editor height="600" width="1100" value="#{newsController.selectnews.content}"/>                       
                            <f:facet name="footer">                                        
                                <p:commandButton actionListener="#{newsController.update()}" update=":messages" icon="ui-icon" oncomplete="viewDetailsDialog.hide();" title="Cập nhật" value="Cập nhật"/>
                                <p:commandButton oncomplete="viewDetailsDialog.hide();" icon="icon-create" title="Cancel" value="Hủy bỏ"/>
                             </f:facet>
                           </h:panelGrid>
                    </p:dialog>
                </h:form>
                   <h:form id="deleteForm">
                    <p:confirmDialog closable="false" showEffect="fade" hideEffect="explode" severity="alert" widgetVar="confirmation"
                                     message="Bạn có muốn xóa ?" header="Xóa tin tức" style="margin:5px auto;">
                        <h:panelGroup layout="block" style="text-align: right">
                            <p:commandButton value="Yes" action="#{newsController.btnDelete()}" update=":formDataTable, :messages" oncomplete="confirmation.hide();" />
                            <p:commandButton value="No" action="#{newsController.resetSelectComment()}" oncomplete="confirmation.hide();" />
                        </h:panelGroup>
                    </p:confirmDialog>
                </h:form>
                </p:outputPanel>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
